<template>
	<top_bg class="top">
		<template v-slot:title>
			<p>{{ title }}</p>
		</template>
	</top_bg>
	<img src="../../assets/goods_left.png" class="left_btn" @click="goPrePage" />
	<div class="information" v-if="Object.keys(addressInfo).length != 0">
		<div class="title_text flex">
			<span>shipping address</span><van-button class="edit_btn" @click="edit">
				<img src="../../assets/edit.png" class="edit_png" />
				<!-- <p class="bottom_txt3">Edit</p> -->
			</van-button>
		</div>
		<p class="title_text1">Email:{{ addressInfo.ems_code }}</p>
		<p class="title_text1">
			{{ addressInfo.shouhuoren }}:{{ addressInfo.mobile }}
		</p>
		<p class="title_text1">{{ addressInfo.jiedao }}</p>
		<p class="title_text1">
			{{ addressInfo.xian }} {{ addressInfo.shi }} {{ addressInfo.sheng }}
			{{ addressInfo.country }}
		</p>
	</div>
	<div class="bottom_info" v-if="Object.keys(addressInfo).length == 0">
		<van-button class="save_btn" @click="add">
			<!-- <p class="bottom_txt4"> -->Add new address<!-- </p> -->
		</van-button>
	</div>
	<!-- <van-button icon="../../edit.png" type="success" class="bottom_btn"   @click="Pay"><p class="bottom_txt3">Pay</p></van-button> -->
</template>

<script>
	// import prize_area_item from "../../components/prize_area_item.vue"
	import one_cart_item from "@/components/one_cart_item";
	import globalData from "@/main.js";

	export default {
		data() {
			return {
				title: "Address Administration",
				state: 0,
				uploads_url: "",
				addressInfo: {},
			};
		},
		computed: {},
		components: {
			// prize_area_item,
		},
		mounted() {
			console.log("===Address Administration mounted===");
			this.uploads_url = globalData["uploads_url"];
			var that = this;
			var uid = this.$cookies.get("uid");
			console.log("===uid===", uid);

			this.axios({
					method: "Get",
					// url: globalData['member_url']+  'home/address',
					url: globalData["member_url"] + "home/address/" + uid,
				})
				.then(function(response) {
					console.log("Address Administration :", response);
					console.log("Address Administration response.data :", response.data);
					if (response.data.length == 0) {
						return;
					}
					that.addressInfo = response.data[0];
					console.log("Address Administration:", typeof that.addressInfo);
				})
				.catch(function(error) {
					// 请求失败处理
					console.log(error);
				});
		},
		methods: {
			goPrePage: function() {
				console.log("---返回---");
				//this.$router.go(-1);
				this.$router.back();
			},
			edit: function() {
				console.log("---edit---this.addressInfo", this.addressInfo);
				var contents = JSON.stringify(this.addressInfo);
				console.log("---edit---contents type:", typeof contents);

				this.$router.push({
					name: "edit_address",
					params: {
						context: contents,
					},
				});
			},
			add: function() {
				console.log("---add---");
				this.$router.push({
					name: "edit_address",
					params: {
						context: " ",
					},
				});
			},
		},
	};
</script>

<style>
	.left_btn {
		position: absolute;
	/* 	top: 30px;
		left: 15px;
		width: 64px;
		height: 64px; */
		top: 2.5rem;
		left: 1rem;
		width: 2rem;
		height: 2rem;
		z-index: 1;
		/* background-color: blueviolet; */
	}

	.information {
		margin-top: 1rem;
		margin-left: 1rem;
		margin-right: 1rem;
		/* text-align: left; */
		padding-left: 1rem;
		padding-top: 0.5rem;
		font-family: "PingFang SC";
		font-size: 1rem;
		border-radius: 20px;
		border-style: none;
		background-color: white;
		/* border-style: dashed; */
		position: relative;
		/* 添加相对定位 */
		/* text-align: center; 文字居中显示 */
		height: 12rem;
	}

	.title_text {
		position: absolute;
		/* 绝对定位 */
		top: -1rem;
		left: 1rem;
		/* 顶部距离为 0 */
		/* left: 50%; */
		/* 水平居中 */
		/* transform: translateX(-50%); */
		/* 水平居中 */
		font-size: 1.5rem;
		font-family: "PingFang SC";
	}

	.title_text1 {
		position: relative;
		/* 绝对定位 */
		top: 1.5rem;
		left: 0rem;
		/* 顶部距离为 0 */
		/* left: 50%; */
		/* 水平居中 */
		/* transform: translateX(-50%); */
		/* 水平居中 */
		font-size: 1rem;
		font-family: "PingFang SC";
		/* font-family: 'PingFang SC'; */
	}

	.edit_btn {
		height: 2.1rem;
		width: 2.8rem;
		font-size: 0.8rem;
		border-radius: 15px;
		margin-right: 10px;
	}

	.edit_png {
		position: relative;
		width: 1.5rem;
		height: 1.5rem;
		left: 0.01rem;
		/* margin-right:0.1rem; */
		margin-top: 0rem;
	}

	/* 	.bottom_txt3 {
		font-size: 0.5rem;
	} */
	.bottom_info {
		position: fixed;
		bottom: 1rem;
	}

	.save_btn {
		/* position: fixed;
		bottom: 1rem; */
		height: 3rem;
		width: 90vw;
		border-radius: 40px;
		font-size: 1rem;
		color: white;
		margin-left: 1rem;
		background-color: #4679f6;
		font-family: "PingFang SC";
	}

	.bottom_txt4 {
		font-size: 1rem;
	}

	.flex {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 20px;
	}
</style>